<template>
    <div class="wrapper">
        <mt-header :fixed="false" title="锁定" mtClass="no-bg"/>
        <div class="content">
            <div class="text">已锁定（RB）</div>
            <div class="money">{{ num }}</div>
            <div class="unlock-num bottom-border">
                <input class="unlock-num-input" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" v-model="inputValueNum">
            </div>
            <div class="rang-unlock">
                <input type="range" v-model="inputValueNum" :max="numInt" min=0 step=1 :style="{'background-size':num<1?'0% 0%':inputValueNum*100/numInt+'% 100%'}"/>
            </div>
        </div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="(inputValueNum<=numInt&&inputValueNum>=1&&(num>=1))?false:true" @click.native="handle">解锁</mt-button>
        </div>
        <div class="tips">
            <div v-show="inputValueNum>num">输入数量超过已锁定的数量</div>
            <div v-show="inputValueNum<1">输入数量不能小于1</div>
        </div>
    </div>
</template> 

<script>
import mtHeader from "@/components/Header"
import { PostUnlock } from '@/api/api'
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            num:0,
            numInt:null,
            inputValueNum:null,
            isShow:false
        }
    },
    components:{
        mtHeader
    },
    mounted(){
        this.num = Number(this.$route.query.lockDlb);
        this.numInt = Math.floor(this.num);
        this.inputValueNum = this.numInt
    },
    methods: {
        handle(){
            PostUnlock({
                lockType:'1',  //0:锁定，1：解锁
                unlockCount:this.inputValueNum
            }).then(res => {
                if( res.code == 200 ){
                    Toast({
                        message: "解锁成功"
                    });
                    this.$router.back(-1);
                }else{
                    Toast({
                        message: res.msg,
                        iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                    })
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
   .content{
        padding:20px 15px;
        .text{
            color:#bfbfbf;
            font-size: 13px;
        }
        .money{
            margin-top: 30px;
            font-weight: bold;
            text-align: center;
            color:#333333;
            font-size: 24px;
        }
        .unlock-num{
            .unlock-num-input{
                padding-bottom: 12px;
                margin-top: 29px;
                height:50px;
                font-size: 14px;
                border-bottom: 1px solid #F4F5FA;
            }
        }
        .rang-unlock{
            margin-top:20px;
        }
    }
    .default-btn{
        margin-top:10px;
    }
    .tips{
        font-size:13px;
        color:#ec3333;
        line-height:20px;
        padding:0 15px;
    }
}
</style>
